<template>
  <div class="users">
    <!-- 面包屑 -->
    <!-- background-color:#fff; -->
    <el-breadcrumb
      separator="/"
      style="line-height:45px;" >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
    <div style="margin-top:15px;">
      <el-input
        placeholder="请输入内容"
        v-model="searchkey"
        class="input-with-select"
        style="width:300px;"
      >
        <!-- 点击实现添加用户效果 -->
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchUser"
        ></el-button>
      </el-input>
      <el-button
        type="success"
        plain
        @click="adddialogFormVisible=true"
      >添加用户</el-button>
    </div>
    <!-- 用户信息列表 表格 -->
    <template>
      <el-table :data="userList" border style="width: 100%;margin-top:15px" >
        <el-table-column type="index" width="50" > </el-table-column>
        <el-table-column prop="username" label="姓名" width="180" > </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180" > </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="180" > </el-table-column>
        <el-table-column label="状态" width="120" >
          <!-- 插槽 -->
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="changeStates(scope.row)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top" >
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                plain
                @click="handleEdit(scope.row)" ></el-button>
            </el-tooltip>
            <el-tooltip
              content="删除"
              placement="top"
            >
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-delete"
                plain
                @click="handleDelete(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              content="角色分配"
              placement="top"
            >
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-share"
                plain
                @click="showGrant(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <el-pagination
    style="margin-top:15px;background-color:#ccc;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 新增用户 -->
    <el-dialog title="添加用户" :visible.sync="adddialogFormVisible">
      <el-form :model="addform" :rules="rules" ref="addform" label-width="100px">
        <el-form-item label="用户名" prop='username'>
          <el-input v-model="addform.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="100px" prop='password'>
          <el-input v-model="addform.password" auto-complete="off" type='password'></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px" prop='email'>
          <el-input v-model="addform.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="100px"  prop='mobile'>
          <el-input v-model="addform.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser('addform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 用户信息编辑 -->
    <el-dialog title="编辑用户信息" :visible.sync="editdialogFormVisible">
      <el-form :model="editform" :rules="rules" ref="editform" label-width="100px">
        <el-form-item label="用户名" prop='username'>
          <el-input v-model="editform.username" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px" prop='email'>
          <el-input v-model="editform.email" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" label-width="100px"  prop='mobile'>
          <el-input v-model="editform.mobile" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser('editform')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 用户角色分配 -->
    <el-dialog title="用户角色分配" :visible.sync="grantdialogFormVisible">
      <el-form :model="grantform" :rules="rules" ref="editform" label-width="100px">
        <el-form-item label="用户名" prop='username'>
          <el-input v-model="grantform.username" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色，联级" prop='username'>
          <template>
            <el-select v-model="grantform.rid" placeholder="请选择" @change="getRid">
              <el-option
                v-for="item in grantList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="grantdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="grantUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetUserList, addUser, editUser, deleteUser, grentList, grantUser, changeState, getUserById } from '@/api'
export default {
  data () {
    return {
      // 搜索框关键字
      searchkey: '',
      // 用来展示数据
      userList: [],
      userState: '',
      pagenum: 1,
      pagesize: 10,
      total: 0,
      // 控制添加用户弹框的显示和隐藏
      adddialogFormVisible: false,
      // 控制编辑用户信息弹框的显示和隐藏
      editdialogFormVisible: false,
      // 控制用户角色授予弹框的显示和隐藏
      grantdialogFormVisible: false,
      // 添加用户数据
      addform: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 编辑用户信息数据
      editform: {
        id: '',
        username: '',
        email: '',
        mobile: ''
      },
      // 编辑用户信息数据
      grantform: {
        id: '',
        rid: '',
        username: ''
      },
      // 下拉选择器框
      grantList: [],
      value: '',

      // 验证规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur,change' }
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 表格操作栏和状态栏
    // 编辑用户的信息提示
    handleEdit (row) {
      console.log(row)
      // 显示编辑用户信息弹框
      this.editdialogFormVisible = true

      // 将对应的用户信息显示到弹框上
      this.editform.username = row.username
      this.editform.id = row.id
      this.editform.email = row.email
      this.editform.mobile = row.mobile
    },
    // 实现删除单个用户的功能
    handleDelete (row) {
      // console.log(row)
      // 调用接口，实现单个用户的删除
      deleteUser(row.id)
        .then(res => {
          // console.log(res)
          // 判断请求是否发送成功
          if (res.meta.status === 200) {
            // 给出提示
            this.$message.success('用户删除成功')
            // 重新渲染数据
            this.init()
          } else {
            // 给出提示
            this.$message.error('用户删除失败')
          }
        })
    },
    // 分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      // 获取当前页的数据条数
      this.pagesize = val
      // 重新渲染数据
      this.init()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      // 获取当前页
      this.pagenum = val
      // 重新渲染数据
      this.init()
    },
    // 封装获取数据渲染函数
    init () {
      // 获取数据,并渲染
      GetUserList({
        query: this.searchkey,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      }).then(result => {
        console.log(result)
        // 判断返回结果
        if (result.meta.status === 200) {
          // 渲染数据
          this.userList = result.data.users
          this.total = result.data.total
        }
      })
    },
    searchUser () {
      // 获取数据,并渲染
      GetUserList({ query: this.searchkey, pagenum: 1, pagesize: 10 }).then(
        result => {
          // console.log(result)
          // 判断返回结果
          if (result.meta.status === 200) {
            // 渲染数据
            this.userList = result.data.users
            this.total = result.data.total
          }
        }
      )
    },
    handleClose () {
      this.adddialogVisible = true
    },
    // 实现添加用户功能
    addUser (addUserInfo) {
      // 自定义表单验证 -- 判断信息是否填入完整
      this.$refs[addUserInfo].validate((valid) => {
        if (valid) {
          // 调用接口，实现添加操作
          addUser(this.addform)
            .then(res => {
              // console.log(res)
              // 判断是否发送请求成功
              if (res.meta.status === 201) {
                // 给出提示
                this.$message({
                  message: '用户添加成功',
                  type: 'success'
                })
                // 隐藏提示框
                this.adddialogFormVisible = false
                // 重新渲染数据
                this.init()
              } else {
                // 给出提示
                // this.$massage.error('用户添加失败')
                this.$message.error('用户添加失败')
              }
            })
        } else {
          // 给出提示
          this.$massage('用户输入数据不完整')
          return false
        }
      })
    },
    // 实现编辑用户信息功能
    editUser (editUserInfo) {
      // 判断用户信息是否填入完整
      this.$refs[editUserInfo].validate(valid => {
        if (valid) {
          // 调用接口，实现用户编辑
          editUser(this.editform)
            .then(res => {
              console.log(res)
              // 判断请求是否发送成功
              if (res.meta.status === 200) {
                // 隐藏弹框
                this.editdialogFormVisible = false
                // 给出提示
                this.$message.success('数据编辑成功')
                // 重新渲染页面
                this.init()
              } else {
                // 给出提示
                this.$message.error('数据编辑失败')
              }
            })
        } else {
          this.$message.error('用户信息不完整')
        }
      })
    },
    getRid () {
      // console.log(111)
    },
    // 弹出角色分配弹框
    showGrant (row) {
      // console.log(row)
      // 显示提示框
      this.grantdialogFormVisible = true
      // 将数据渲染到弹框上
      this.grantform.id = row.id
      this.grantform.username = row.username
      this.grantform.rid = row.role_name
      // 调用接口，实现下拉框数据的渲染
      grentList().then(res => {
        // console.log('res' + res)
        // 判断请求是否发送成功
        if (res.meta.status === 200) {
          this.grantList = res.data
          // 将数据显示出来
          // 调用接口，实现根据id查询数据
          getUserById(this.grantform.id)
            .then(res1 => {
              // console.log('res1' + res1)
              if (res1.meta.status === 200) {
                // console.log(res1)
                if (res1.data.rid <= 0) {
                  this.grantform.rid = '请选择'
                } else {
                  this.grantform.rid = res1.data.rid
                }
              }
            })
        } else {
          this.$message.error('数据查询失败')
        }
      })
    },
    // 实现角色分配功能
    grantUser () {
      // console.log(this.grantform.rid)
      // 判断是否有角色id
      if (this.grantform.rid) {
        // 调用接口，实现角色分配
        grantUser(this.grantform)
          .then(res => {
          // console.log(res)
            if (res.meta.status === 200) {
            // 给出提示
              this.$message.success('角色授予成功')
              // 隐藏提示框
              this.grantdialogFormVisible = false
              // 重新渲染数据
              this.init()
            } else {
              this.$message.error('角色授予失败')
            }
          })
      } else {
        this.$message.error('用户数据输入不完整')
        return false
      }
    },
    // 实现修改用户状态修改功能
    changeStates (row) {
      // console.log(row)
      // 调用接口，实现用户状态修改
      changeState(row.id, row.mg_state)
        .then(res => {
          // console.log(res)
          // 判断请求是否发送成功
          if (res.meta.status === 200) {
            // 给出提示
            this.$message({
              message: res.meta.msg,
              type: 'success'
            })
          } else {
            this.$message({
              message: res.meta.msg,
              type: 'error'
            })
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
